@import './common/var.scss';

$--avatar-prefix-cls: "c-avatar";

@mixin reset-component() {
  font-family: $--avatar-font-family;
  font-size: $--font-size-base;
  line-height: $--avatar-line-height-base;
  color: $--avatar-text-color;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin avatar-size($size, $font-size) {
  width: $size;
  height: $size;
  line-height: $size;
  border-radius: $size / 2;
  & > * {
    line-height: $size;
  }

  &.#{$--avatar-prefix-cls}-icon {
    font-size: $font-size;
  }
}


.#{$--avatar-prefix-cls} {
  @include reset-component();

  display: inline-block;
  text-align: center;
  background: $--avatar-background-color;
  color: $--avatar-color;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  @include avatar-size($--avatar-size-base, $--avatar-font-size-base);

  &-lg {
    @include avatar-size($--avatar-size-lg, $--avatar-font-size-lg);
  }

  &-sm {
    @include avatar-size($--avatar-size-sm, $--avatar-font-size-sm);
  }

  &-square {
    border-radius: $--border-radius-base * 4;
  }

  & > img {
    width: 100%;
    height: 100%;
    display: block;
  }
}
